<template>
  <view>
   <view class="info-box">
     <!-- 头像和昵称区域 -->
     <view class="user-box">
       <image class="avatar" :src="userInfo.userInfo.avatarUrl"></image>
       <view class="nickname">
         {{userInfo.userInfo.nickName}}
       </view>
     </view>
       <!-- 第一行面板 -->
     <view class="panel-list">
       <view class="panel-body">
         <view class="panel-item">
           <text>8</text>
           <text>收藏的店铺</text>
         </view>
         <view class="panel-item">
           <text>8</text>
           <text>收藏的商品</text>
         </view>
         <view class="panel-item">
           <text>8</text>
           <text>关注的商品</text>
         </view>
         <view class="panel-item">
           <text>8</text>
           <text>足迹</text>
         </view>
       </view>
     </view>
<!-- 第二行面板 -->
     <view class="panel-list">
       <view class="panel-body">
         <view class="panel-item">
          <image class="icon" src="../../static/my-icons/icon1.png" ></image>
                     <text>收藏的店铺</text>
         </view>
         <view class="panel-item">
            <image  class="icon" src="../../static/my-icons/icon2.png" ></image>
                       <text>收藏的商品</text>
         </view>
         <view class="panel-item">
             <image class="icon" src="../../static/my-icons/icon3.png" ></image>
                        <text>关注的商品</text>
         </view>
         <view class="panel-item">
           <image class="icon" src="../../static/my-icons/icon4.png" ></image>
                      <text>足迹</text>
         </view>
       </view>
     </view>
     <!-- 第三个面板 -->
     <view class="panel-list-right">
         <view class="panel-item">
           <text>收货地址</text>
           <uni-icons class="right_icon" type="arrowright" size="16"></uni-icons>
         </view>
         <view class="panel-item">
           <text>联系客服</text>
           <uni-icons class="right_icon" type="arrowright" size="16"></uni-icons>          
         </view>
         <view @click="delLogin" class="panel-item">
           <text>退出登录</text>
          <uni-icons class="right_icon" type="arrowright" size="16"></uni-icons>   
         </view>
       </view>
   </view>
  </view>
</template>

<script>
  import { mapState,mapMutations } from 'vuex'
  export default {
    name:"my-info",
    computed:{
      ...mapState('m_user',['userInfo'])
    },
    data() {
      return {
        
      };
    },
    methods:{
      ...mapMutations('m_user',['undateToken','updateAddress','undateUserInfo']),
     async delLogin(){
      // 退出登录
      const [err,succ] = await uni.showModal({
        title:'提示',
        content:'是否退出登录'
      })
      if(succ.confirm){
        this.undateToken(null)
         this.updateAddress('{}')
          this.undateUserInfo('{}')
          this.updateRedirectInfo(null)
      }
      }
    }
  }
</script>

<style lang="scss">
.info-box{
  height: 100vh;
  background-color: #F8F8F8;
    .user-box{
      height: 400rpx;
      background-color: #c00000;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
      .avatar{
        width: 90px;
        height: 90px;
        border-radius: 50%;
        border: 2px solid #fff;
        box-shadow: 0 1px 5px #000;
      }
        .nickname{
          font-size: 16px;
          margin-top: 10px;
          color: #fff;
          font-weight: bold;
        }
}
.panel-list{
  padding: 0 10px;
  position: relative;
  top: -10px;
      .panel-body{
        display: flex;
        justify-content: space-around;
        background-color: #FFFFFF;
        border-radius: 3px;
        margin-bottom: 8px;
      }
        .panel-item{
          font-size: 12px;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 10px 0;
        }
          .icon{
            width: 35px;
            height: 35px;
          }
             
}
.panel-list-right{
     font-size: 12px;
     display: flex;
     flex-direction: column;
     padding: 0 10px;
    .panel-item{
      padding-bottom: 30px;
    }
      .right_icon{
        float: right;
      }
}
</style>
